<!DOCTYPE html>
<html>
    <head>
        <title>Mapa de puntos</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <link href="<?php echo base_url(); ?>css/bootstrap.css" rel="stylesheet">
        <link href="<?php echo base_url(); ?>css/style.css" rel="stylesheet">
         <script src="<?php echo base_url(); ?>js/jquery.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
        <style>
            html, body, #map-canvas {
                font-family: Alef;  
                margin: 0;
                padding: 0;
                height: 100%;
            }
            #logo{
              width:20%;
              position:absolute;
              top:0px;
              left:0px;
              border:none;
              padding: 20px;
          }
          #nodatos{
            width:20%;
            position:absolute;
            top:0px;
            left:0px;
            border:none;
            padding: 20px;
            z-index: 1;
        }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    

        <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/src/infobox.js"></script>
        <script type="text/javascript">
            var id = <?php echo $_GET['id'] ?>;
            var map;
            var markers = new Array();
            var infoWindow;
   
    function initialize() {
        var mapOptions = {
            zoom: 11,
            disableDefaultUI: true,
            center: new google.maps.LatLng( 19.245226,-103.733455),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
          
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
        google.maps.event.addListener(map, 'click', function(event) {
            if (infoWindow) 
                infoWindow.close();
        });
        var iconBase='<? echo base_url() ?>img/pines/';
          <?php
            $id = $_GET['id'];
            $fechaI = $_GET['fechaI'];
            $fechaF = $_GET['fechaF'];
            $sql = "SELECT dispositivos.asignadoa,
                    iddato,fecha,fechasend,latitude,longitude,codigos.codigo 
                         FROM datosge INNER JOIN dispositivos
                              ON datosge.iddispositivo=dispositivos.iddispositivo				
                              INNER JOIN codigos
                              ON datosge.codigo=codigos.idcodigo
                         WHERE  datosge.iddispositivo = ? and fechasend >= " . $fechaI . "  and fechasend <= '" . $fechaF . " 23:59:59'";
            $i = 0;
            $query = $this->db->query($sql, $id);
            $rows = $query->result_array();
            foreach ($rows as $value) { ?>
                marker  = new google.maps.Marker({
                position: new google.maps.LatLng(<?php echo $value['latitude']; ?>,<?php echo $value['longitude']; ?>),
                map: map,
                icon: <?php echo '"../img/imgMapa/number_' . $i . '.png"'; ?> ,
                title: <?php echo "'" . $value['asignadoa'] . "'"; ?>});
                google.maps.event.addListener(marker, 'click', function() {
                          $.ajax({
                              type: "GET",
                              url: "../webservice/WebService/getDireccion",
                              data: "lat="+<?php echo $value['latitude']; ?>+"&lon="+<?php echo $value['longitude']; ?>,
                              dataType: "html",
                              contentType: "application/x-www-form-urlencoded",
                              success: function(datos1){

                                  var boxText = document.createElement("div");
                                  boxText.style.cssText =  "margin-top:8px; background: #696969; border-radius:10px; padding: 5px; color:#000;";
                                  boxText.innerHTML = '<div class="well">'+
                                      '<table style="width:100%">'+
                                      '<thead>'+
                                      '<tr class="btn-info">'+
                                      '<td colspan="2"><center>'+<?php echo "'" . $value['asignadoa'] . "'"; ?>+'</center></td>'+
                                      '</tr>'+
                                      '</thead>'+
                                      '<tbody>'+
                                      '<tr><td><b>Codigo:</b></td><td style="padding-left:15px;">'+<?php echo "'" . $value['codigo'] . "'"; ?> + '</td></tr>' +
                                      '<tr><td><b>Fecha:</b></td><td style="padding-left:15px;">'+ <?php echo "'" . $value['fecha'] . "'"; ?> + '</td></tr>'+
                                      '<tr><td><b>Dirección:</b></td><td style="padding-left:15px;">'+ datos1 + '</td></tr>' +
                                      '</tbody>'+
                                      '</table>'+
                                      '</div>';

                                  var myOptions = {
                                      content: boxText
                                      ,disableAutoPan: false
                                      ,maxWidth: 0
                                      ,pixelOffset: new google.maps.Size(-140, 0)
                                      ,zIndex: null
                                      ,boxStyle: { 
                                          background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                                          opacity: 1
                                          ,width: "400px"
                                      }
                                      ,closeBoxMargin: "10px 10px 10px 10px"
                                      ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                                      ,infoBoxClearance: new google.maps.Size(1, 1)
                                      ,isHidden: false
                                      ,pane: "floatPane"
                                      ,enableEventPropagation: false
                                  };
                                  var infowindow = new InfoBox(myOptions);
                                  if(infoWindow)
                                      infoWindow.close();
                                  infoWindow = infowindow;
                                  infoWindow.open(map,markers[<?php echo $i; ?>]);     
                              }
                          });
                      });
                      markers.push(marker);
                  <?php
                  $i++;
            }?>
            
            if(markers.length > 0){
                    $('#nodatos').addClass('ocultar');
                    map.setCenter(markers[0].getPosition());
                }
                else{
                  $('#logo').addClass('ocultar');
                }         
        } //Fin initialize()
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="nodatos">
            <img src="<?php echo base_url(); ?>/img/nodatos.png" />
        </div>
        <div id="logo" class="pull-left" style="z-index: 1;">
          <img src="<?php echo base_url(); ?>/img/POSMobile.png" style="opacity:0.4;"/>
        </div>
        <div id="map-canvas"></div>
    </body>
   
</html>